<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .colors {
            width: 90%;
            height: 90%;
            margin: 5% auto;
        }

        .box {
            width: 200px;
            height: 320px;
            margin: 50px auto 0;
            background: #eee;
        }
    </style>
</head>

<body>
    <div class="colors">
        <div class="box">
            <div>
                <label for="">用户名:</label>
                <input type="text" class="user">
                <p class="user_span"></p>
            </div>
            <div>
                <label for="">密&emsp;码:</label>
                <input type="text" class="password">
                <p class="password_span"></p>
            </div>
            <div>
                <label for="">手机号:</label>
                <input type="text" class="phone">
                <p class="phone_span"></p>
            </div>
            <div>
                <label for="">手机号:</label>
                <input type="text" class="email">
                <p class="email_span"></p>
            </div>
            <div>
                <input type="submit" class="btn" value="注册">
                <input type="reset" class="res" value="取消">
            </div>
        </div>
    </div>
</body>
<script>
    var colors = document.getElementsByClassName("colors")[0];
    var box = document.getElementsByClassName("box")[0];
    var userInp = document.getElementsByClassName("user")[0];
    var user_span = document.getElementsByClassName("user_span")[0];
    var passwordInp = document.getElementsByClassName("password")[0];
    var password_span = document.getElementsByClassName("password_span")[0];
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phone_span = document.getElementsByClassName("phone_span")[0];
    var emailInp = document.getElementsByClassName("email")[0];
    var email_span = document.getElementsByClassName("email_span")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var res = document.getElementsByClassName("res")[0];

    //随机背景颜色
    function numColor() {
        var num = Math.round(Math.random() * 255);
        return num;
    }
    colors.style.background = `rgb(${numColor()} , ${numColor()} , ${numColor()})`;
    console.log(colors.style.background);

    var regNum = /\d/;
    var regD = /A-Z/;
    var regS = /a-z/;
    var regNET = /^[A-Za-z_][0-9A-Za-z_]{6,12}$/
    var regNE = /^[0-9A-Za-z]{6,12}$/

    // btn.onclick = function () {
    //     var user = userInp.value;
    //     var password = passwordInp.value;
    //     var phone = phoneInp.value;
    //     var email = emailInp.value;
    //     // 用户名
    //     if (user.length >= 6 && user.length <= 12) {
    //         var firstChild = user.charAt(0);
    //         if (regNum.test(firstChild) == false) {
    //             if (regNET.test(user)) {
    //                 user_span.innerText = "√";
    //                 user_span.style.color = "green";
    //                 user_span.style.fontSize = "12px"
    //             } else {
    //                 user_span.innerText = "用户名只能以数字，大小写字母，下划线组成";
    //                 user_span.style.color = "red";
    //                 user_span.style.fontSize = "12px"
    //             }
    //         } else {
    //             user_span.innerText = "用户名不能以数字开头";
    //             user_span.style.color = "red";
    //             user_span.style.fontSize = "12px"
    //         }

    //     } else {
    //         user_span.innerText = "用户名需在6-12之间";
    //         user_span.style.color = "red";
    //         user_span.style.fontSize = "12px"
    //     }

    //     //密码
    //     if (password.length >= 6 && password.length <= 12) {
    //         if (regNE.test(password)) {
    //             var index = 0;
    //             if (regNum.exec(password) != null) {
    //                 index++;
    //             }
    //             if (regD.exec(password) != null) {
    //                 index++;
    //             }
    //             if (regS.exec(password) != null) {
    //                 index++;
    //             }
    //             console.log(index);
    //             switch (index) {
    //                 case 1:
    //                     password_span.innerText = "密码强度弱";
    //                     break;
    //                 case 2:
    //                     password_span.innerText = "密码强度中";
    //                     break;
    //                 case 3:
    //                     password_span.innerText = "密码强度强";
    //                     break;
    //             }
    //         } else {
    //             password_span.innerText = "密码只能以数字，大小写字母组成";
    //             password_span.style.color = "red";
    //             password_span.style.fontSize = "12px"
    //         }
    //     } else {
    //         password_span.innerText = "密码需在6-12之间";
    //         password_span.style.color = "red";
    //         password_span.style.fontSize = "12px"
    //     }
    // }

    userInp.onblur = function () {
        var regLength = /^.{6,12}$/;
        var regNum = /^\d/;
        var reg = /[^\w]/;

        var user = userInp.value;
        if (!regLength.test(user)) {
            user_span.innerText = "用户名需在6-12之间";
            user_span.style.color = "red";
            user_span.style.fontSize = "12px"
        } else if (regNum.test(user)) {
            user_span.innerText = "用户名不能以数字开头";
            user_span.style.color = "red";
            user_span.style.fontSize = "12px"
        } else if (reg.test(user)) {
            user_span.innerText = "用户名只能以数字，大小写字母，下划线组成";
            user_span.style.color = "red";
            user_span.style.fontSize = "12px"
        } else {
            user_span.innerText = "√";
            user_span.style.color = "green";
            user_span.style.fontSize = "12px"
        }
    }
</script>

</html>